<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <!-- .native 用以监牢组件根元素的的原生事件 @click.native 即监控原生click事件， 如果不用.native则只能监听该组通过$emit触发的事件-->
      <li><ButtonA @click.native="cdClick" :msg="clkHere"></ButtonA></li>
      <li><ButtonA @click.native="changeLanguage" :msg="language.lable1"></ButtonA></li>
      <li><ButtonA @click.native="login" clsType="success" :msg="wsLogin"></ButtonA></li>
      <li><ButtonA @click.native="logout" clsType="danger" :msg="wsLogout"></ButtonA></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="#" @click="cdClick">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>

    <div class="alert alert-success">
      <br>{{ 'Login Name:' + UserInfo.LoginName }}
      <br>{{ ' Full Name:' + UserInfo.FullName }}
      <br>{{ ' SessionID:' + UserInfo.SessionID }}
    </div>
    <!-- 登录对话框：4.点击该按钮弹出登录对话框 -->
    <ButtonA clsType="warning" :msg="loginDlg"  @click.native = "showLogin" ></ButtonA>
    <!-- 登录对话框：3.登录标签 -->
    <LoginModal id="loginDialog" @loginSucced="loginSuccessed"></LoginModal>
  </div>

</template>

<script>
import ba from './ba.vue'
// 登录对话框：1.登录模板引入
import login from './login.vue'
/*
@ 等价于 /src 这个目录，免得你写麻烦又易错的相对路径
定义于webpack.base.conf.js的路径别名
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
*/
import lanCh from '@/language/lanCh.vue'
import lanEn from '@/language/lanEn.vue'

var hello = {
  name: 'hello',
  components: {
    'ButtonA': ba,
    // 登录对话框：2.定义登录组件
    'LoginModal': login
  },
  methods: {
    cdClick (e) {
      this.clkCount++
      this.clkHere = 'Click ' + this.clkCount
    },
    changeLanguage () {
      if (this.language === lanEn) {
        this.language = lanCh
      } else {
        this.language = lanEn
      }
    },
    login () {
      // self用于在ajax函数中使用this
      var self = this;

      $.ajax({
        // 必须POST
        type: 'POST',
        // 必须如此
        contentType: 'application/json; charset=utf-8',
        // 必须json
        dataType: 'json',
        // 注意接口函数前用'/'
        url: 'http://10.0.1.22:8119/vd4ws/VD_WS_Server.asmx/SystemLogin',
        // data必须有值，如果无参数时需要写为 data: '{}'
        data: '{userName:"c",password:"c",language:"1",IP:""}',
        success: function (response) {
          // response.d 为接口返回的数据
          if (response.d.Success) {
            var loginInfo = response.d
            self.UserInfo.LoginName = loginInfo.LoginResult.UserProfile.LoginName
            self.UserInfo.FullName = loginInfo.LoginResult.UserProfile.Fullname
            self.UserInfo.SessionID = loginInfo.LoginResult.SessionID
          } else {
            alert('Login fail.')
          }
        },
        error: function (xhr, status, error) {
          alert($.parseJSON(xhr.responseText).Message)
        }
      })
    },
    logout () {
      var self = this

      $.ajax({
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        url: 'http://10.0.1.22:8119/vd4ws/VD_WS_Server.asmx/SystemLogout',
        data: '{sessionIDIn:"' + self.UserInfo.SessionID + '"}',
        success: function (response) {
          if (response.d) {
            self.UserInfo.LoginName = 'none'
            self.UserInfo.FullName = 'none'
            self.UserInfo.SessionID = 'none'
          } else {
            alert('Logout fail.')
          }
        },
        error: function (xhr, status, error) {
          alert('error')
          alert($.parseJSON(xhr.responseText).Message)
        }
      })
    },
    showLogin () {
      $('#loginDialog').modal('show');
    },
    loginSuccessed (user) {
      this.UserInfo.LoginName = user.userName;
      this.UserInfo.FullName = user.fullName;

      $('#loginDialog').modal('hide');
    }
  },
  data () {
    return {
      msg: 'Welcome to Jingkang-hou first Vue.js App',
      clkHere: 'Click Here',
      wsLogin: 'WebService Login',
      wsLogout: 'WebService Logout',
      loginDlg: 'Bootstrap Model Login',
      language: lanCh,
      clkCount: 0,
      UserInfo: {
        LoginName: '',
        FullName: '',
        SessionID: ''
      }
    }
  }
}

export default hello;
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}


</style>
